<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo2</title>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./handlebars.js"></script>
</head>
<body>
    <div class="demo">
        <div class="tpldemo">
            <h1 style="color:{{color}}">{{demo1}}</h1>
            <p>{{desc}}</p>
        </div>
    </div>  
    <script type="text/javascript">
        var context = {
            "demo1": "this is a demo",
            "desc": "study Handlebars",
            "color": "red"
        };
        //1. 获取模板内容
        var tpl = $(".tpldemo").html();
		//2. 预编译模板
		var template = Handlebars.compile(tpl);
		//3. 模板数据填充
		var html = template(context);
		//4. 将结果追加到页面中
		$(".tpldemo").html(html);
    </script>
</body>
</html>